<template>
  <div id="">
    <headerbox :headerTitle="'银行卡'" :hasBack='true' :headerRightTxt="'编辑'" @headerRightEvent="headerRightEvent"></headerbox>
    <noneList v-if="cardList.length==0" :noneTxt="'您还没有添加银行卡~'"></noneList>
    <ul class="banklist" v-else>
      <li v-for="cardItem in cardList" :key="cardItem.key" v-bind:style="{backgroundImage:'url('+imgUrlLink(cardItem.ballBankType.backGround)+')'}"
      @click="chooseBank(cardItem)">
        <img :src="imgUrlLink(cardItem.ballBankType.logo)" alt="">
        <div class="">
          <h3>{{cardItem.ballBankType.bankName}}</h3>
          <p>{{cardType(cardItem.cardNum)}}</p>
          <!-- **** **** **** ****569 -->
          {{cardItem.cardNum}}
        </div>
      </li>
    </ul>
    <div class="fixedButtom">
      <button type="button" name="button" class="blockButton" style="border-radius:0;" @click="addBank">
        <img src="@/assets/myWallet/add_icon.png" alt="" width="20">
        添加银行卡
      </button>
    </div>
    <router-view class="childrenPage"></router-view>
  </div>
</template>
<script>
import {userCardList} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    cardList:[],    //银行卡列表
    withdrawBank:false,   //是否从提现页面跳转
  }),
  components: {
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    ...mapMutations(['setBankStore']),
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 添加银行卡
    addBank() {
      this.$router.push({name:'addBank'});
    },
    // 判断银行卡类型：储蓄卡 or 信用卡(16位)
    cardType(idNum) {
      if(idNum.length==16) {
        return '信用卡'
      }else{
        return '储蓄卡'
      }
    },
    // 获取银行卡列表
    getCardList() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      userCardList({token:xlyd_loginInfo.token}).then(res=>{
        console.log(res);
        if(res) {
          self.cardList = res.data.result;
        }
      })
    },
    // 提现跳转过来可以选择银行卡
    chooseBank(bankItem) {
      if(this.withdrawBank) {
        this.setBankStore(bankItem);    //将选中的银行卡存入store
        this.$router.go(-1);
      }else {
        return false;
      }
    },
    // 编辑银行卡——跳转新页面，可以解绑
    headerRightEvent() {
      let cardList = this.cardList;
      if(cardList.length==0) {
        this.toast('您还没有绑定任何银行卡，请先添加银行卡~');
        return false;
      }
      this.$router.push({name:'modifyBanklist'});
    },
  },
  mounted() {
    //do something after mounting vue instance
    this.getCardList();
    let withdrawBank = this.$route.params.withdrawBank;
    console.log(withdrawBank);
    this.withdrawBank = withdrawBank;
  }
}
</script>
<style lang="scss" scoped>
.banklist{
  padding: 15px;
  li{
    border-radius: 4px;
    padding: 20px 20px 40px;
    background: $blueColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    @include flex;
    align-items: flex-start;
    margin-bottom: 10px;
    img{
      width: 40px; height: 40px;
      border-radius: 100%;
    }
    div{
      @include flexcell;
      margin-left: 10px;
      line-height: 1.5em;
      p{
        font-size: 12px;
      }
    }
  }
}
</style>
